<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="newAdminbutton">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="userName" label="账号" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="添加时间">
      <template v-slot:default="scope">{{
        formatTime(scope.row.createTime)
      }}</template>
    </el-table-column>
    <el-table-column label="最后登录">
      <template v-slot:default="scope">{{
        formatTime(scope.row.loginTime)
      }}</template>
    </el-table-column>
    <el-table-column label="是否启用">
      <template v-slot:default="scope"
        ><el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot:default="{ row }">
        <el-button @click="allocRole(row.id)">分配角色</el-button>
        <el-button @click="editAdminbutton(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <EditAdmin
    :visible="visible"
    @Cencel="cencelDialog"
    :form="rowdata"
  ></EditAdmin>

  <EditRole :visible="roleVisible" :form="roleData" @close="closeRoleDialog" />
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import { getAdminList } from "../../request/api";
import EditAdmin from "./components/EditAdmin.vue";
import EditRole from "./components/EditRole.vue";
import { getRoleListAll, getAdminRoleById } from "../../request/api";

//查询条件
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});
const onSubmit = () => {
  console.log("submit!");
};
//用户列表字段
const input = ref("");
const state = reactive<{
  tableData: {}[];
  a: number;
  visible: boolean;
  rowdata: AdminObjItf;
  roleVisible: boolean;
  roleData: AdminRoleFromData;
}>({
  tableData: [],
  a: 1,
  visible: false,
  rowdata: {},
  roleVisible: false,
  roleData: {
    userRoles: [],
    roleLists: [],
    adminId: 0,
  },
});
const { tableData, a, visible, rowdata, roleVisible, roleData } = toRefs(state);

const fatchData = () => {
  getAdminList({
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  }).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.list;
    }
  });
};
fatchData();
//获取所有角色
getRoleListAll().then((res) => {
  if (res.code == 200) {
    roleData.value.roleLists = res.data;
  }
});
//点击分配角色
const allocRole = (id: number) => {
  getAdminRoleById(id).then((res) => {
    console.log("分配角色res" + res);
    if (res.code == 200) {
      roleVisible.value = true;
      roleData.value.userRoles = res.data;
      console.log("resdata:" + res.data);
    }
  });
};
//隐藏分配角色页面
const closeRoleDialog = () => {
  roleVisible.value = false;
};

//点击编辑按钮
const editAdminbutton = (row: AdminObjItf) => {
  visible.value = true;
  rowdata.value = row;
};
//点击新增按钮
const newAdminbutton = (row: AdminObjItf) => {
  visible.value = true;
  rowdata.value = row;
};
//点击取消按钮异常弹出
const cencelDialog = (r?: "reload") => {
  visible.value = false;
  //清空编辑弹出
  rowdata.value = {};
  if (r === "reload") {
    fatchData();
  }
};

//格式化时间
//补零
const addZero = (num: number) => {
  return num > 9 ? num : "0" + num;
};
const formatTime = (time: string | undefined) => {
  if (!time) return "";
  const date = new Date(time);
  const year: number = date.getFullYear();
  let month = addZero(date.getMonth());
  let day = addZero(date.getDay());
  let hours = addZero(date.getHours());
  let minu = addZero(date.getMinutes());
  let sec = addZero(date.getSeconds());
  return `${year}-${month}-${day} ${hours}:${minu}:${sec}`;
};
</script>

<style lang="less" scoped></style>
